<!DOCTYPE html>

<html>
    <head>
        <title>个人主页</title>
        <meta charset="utf-8">
        <style>
            body{
                margin: 0;
                margin-bottom: 80px;
                background-color:lightblue; 
            }
            #banner{
                height: 700px;
                background-image: url(3.jpg);
                font-size: 50px;
                line-height: 700px;
                text-align: center;
                margin-top: 80px;
            }
            #container{
                width: 1000px;
                margin: 0 auto;
               
            }
            .text1{
                text-indent: 2em;
                color:gray;
            } 
            .text2{
                text-indent: 2em;
                color: red;
            }
            .text3{
                text-indent: 2em;
                color: peru;
            }
            .text4{
                text-indent: 2em;
                color: violet;
            }
             .text5{
                  text-indent: 2em;
                  color: white;
            }
            .pic{
                width: 100%;
            }
            #background{
                height: 600px;
                background-image: url(13.jpg);
                background-size: 100% 100%;
                position: relative;
                z-index: -1;
            }
            #classmate1{
                width: 200px;
                height: 250px;
                left: 240px;
                top: 150px;
                position: absolute;
                border-radius: 50%;
                border: solid 4px white;
            }
            #classmate2{
                width: 150px;
                /*height: 200px;*/
                right: 150px;
                top: 100px;
                position: absolute;
                border-radius: 50%;
                border: solid 4px white;
            }
            #classmate3{
                width: 200px;
                height: 200px;
                left: 490px;
                bottom: 50px;
                position: absolute;
                border-radius: 50%;
                border: solid 4px white;
            }
            .text1:first-letter{
                font-size: 40px;
            }
            .text2:first-letter{
                font-size: 40px;
            }
            .text3:first-letter{
                font-size: 40px;
            }
            .text4:first-letter{
                font-size: 40px;
            }
            .text5:first-letter{
                font-size: 40px;
            }
            #nav{
                width: 100%;
                background-color: wheat;
                height: 80px;
                left: 0;
                top: 0;
                position: fixed;
                z-index: 2;
                /*text-align: center;*/
            }
            #inner-nav{
                width: 1000px;
                margin: 0 auto;
                text-decoration: none;
                text-align: right;
                height: 80px;
                line-height: 80px;
            }
            #inner-nav a{
                margin: 0 20px;
                text-decoration: none;
                color: cyan;
                font-size: 24px;
                display: inline-block;
                height: 80px;
            }
            #inner-nav a:hover{
            background-color: white;
        }
            h3{
                font-family: 微软雅黑;
                color: blue;
            }
            h1,h2{
                text-align: center;
                font-family: 楷体;
                color: seagreen;
            }            
        </style>
   </head>

    <body>
        <div id="nav">
        <div id="inner-nav">
            <a href="#hometown">我的家乡</a>
            <a href="#myschool">我的学校</a>
            <a href="#sport">我最喜欢的运动</a>
            <a href="#game">我最喜欢的游戏</a>
            <a href="#classmate">我的同学</a>
        </div>
        </div>
        <div id="banner"></div>

        <div id="container">
            <!--<h1>翟瑞东</h1>
            <h2>欢迎来到我的空间</h2>-->
           
            
            <div>
            <h3 id="hometown">我的家乡</h3>
            <p class="text1">新密位于省会郑州西南40公里处，总面积1001平方公里，辖13个乡镇、4个街道办事处，人口76万。新密是全省26个加快城镇化进程重点县（市）之一。新密历史悠久，文化灿烂。早在8000多年前，我们的祖先就在这片富饶的土地上生息繁衍，人文始祖轩辕黄帝在此出生，立宫建殿、建都定国，开创了华夏一统基业，缔造了华夏五千年文明历史。西汉高祖刘邦始置密县，迄今已有2000余年。境内名胜众多，风光秀美，轩辕丘古城寨城址、黄帝宫、郑公墓、汉墓锺华夏之灵，青屏山、神仙洞、香峪寺、桃花源毓溱之秀。轩辕丘古城寨址的发掘 ，被评为2000年全国十大考古新发现之一，2001年被国务院公布为全国文物重点保护单位，已被专家考证为黄帝古都轩辕丘。 
新密资源丰富，物阜品优。矿产资源遍布全境，已探明矿藏有25种，煤炭、铝钒土、石灰石、硅石等储量大、品位高，为工业发展奠定了雄厚的物质基础，由此逐步形成了煤炭、耐材、造纸、建材四大支柱产业，超化镇是闻名国内外的耐火材料专业镇，大隗镇被誉为全国造纸第一镇。农特产金银花、桑杈、大蒜、密香杏等品质优良，享誉海内外。新密区位优越，环境优良。新密地处以郑州为中心的中原城市群隆趣带和“郑州半小时经济”内，已纳入大郑州建设规划，交通网络四通八达，紧临应变珠高速公路和郑州国际机场，郑少高速横贯东西，基础设施完备，电力、水资源充足，综合通信能力已跨入全国百强。城市建设高起点规划、高标准建设，城市功能更加完备，人居环境更加和谐，一座现代化的中等城市正在崛起。</p> 
            <img class="pic" src="12.jpg">
            </div>
            <div>
            <h3 id="myschool">我的学校</h3>
            <p class="text2">黄河科技学院位于河南郑州。学校创立于1984年10月；1994年2月，经国家教育委员会批准建立民办黄河科技学院，实施高等专科学历教育；2000年3月，经国家教育部批准，在民办专科层次的基础上建立新的本科层次的黄河科技学院；2004年取得学士授予权；2008年通过国家教育部普通本科教学工作水平评估；2013年被教育部批准为“应用科技大学改革试点战略研究单位”。并成为中国应用技术大学联盟的首批成员和河南省首批转型发展试点高校；2014年学校获高等教育国家级教学成果二等奖。2015年，学校“黄河众创空间”被科技部认定为全国首批众创空间，学校获批“河南省大学生创业示范基地”“河南省首批示范性应用技术类型本科院校”。2016年，学校荣登首批“全国高校创新创业工作50强"榜单，学校大学科技园被认定为国家级科技企业孵化器，学校获批“河南省创业孵化示范基地”“河南省省普通大中专毕业生就业创业工作先进单位”。2017年，学校创业园获批“全国大学生创业示范园”，学校获批“河南省首批高校双创基地”。学校的发展史就是一部敢为天下先的创新创业史，曾两次被美国弗吉尼亚大学商学院写进教学案例，并被《人民日报》《华盛顿邮报》等中外著名媒体多次报道。</p>
            <img class="pic" src="11.jpg">
            </div>
            <div>
            <h3 id="sport">我最喜欢的运动</h3>
            <p class="text3">篮球，起源于美国。1891年12月21日，由美国马萨诸塞州斯普林菲尔德基督教青年会训练学校（现译名为美国春田大学，Springfield College）体育教师詹姆士·奈史密斯发明[2]  。1896年，篮球运动传入中国，并且2002年姚明以状元的身份入选NBA，开启了中国篮球新的狂潮。</p>
            <img class="pic" src="5.jpg" >
            </div>
            <div>
            <h3 id="game">我最喜欢的游戏</h3>
            <p class="text4">《梦三国2》是一款由杭州电魂历时两年倾力打造的国风竞技游戏。梦三国2保留了前作的三国文化背景和基础玩法，在此之上，优化了画面和操作体验，增加了全新的地图和玩法，带给各位玩家酣畅淋漓的爽快体验。</p>
            <img class="pic" src="7.jpg">
            </div>
            <div>
            <h3 id="classmate">我的同学</h3>
            <p class="text5">感谢小新大帅哥、允儿女神、华哥男神多年以来的陪伴成长，我相信在接下来的四个月的学习生活中，我一定能够突破自我，学成归来。</p>
            <div id="background">
            <img id="classmate1" src="14.jpeg">
            <img id="classmate2" src="9.jpg">
            <img id="classmate3" src="10.jpg">
            </div>
            </div>
            
        </div>
    </body>
</html>